<template>
  <div>
    <h1>Counter Example</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <p>Double Count: {{ doubleCount }}</p>
    <p>Array: {{ arr }}</p>

    <p>Array Sum: {{ arrSum }}</p>
    <button @click="updateArr">Update Array</button>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { useCounter } from '@/hooks/useCounter.ts';
const a = 1;
const { count, arr, doubleCount, arrSum, increment, updateArr } = useCounter();
onMounted(() => {
  console.log('环境配置', import.meta.env);
});
</script>

<style scoped>
/* 页面样式 */
</style>
